<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>智慧养老服务平台 - 健康数据精准呈现</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap"
    rel="stylesheet">
  <link rel="stylesheet" href="css/智慧养老平台.css">
</head>

<body>
  <script type="module" src="js/智慧养老平台.js"></script>
  <div id="app">
    <!-- 顶部导航栏 -->
    <header class="header">
      <div class="nav-container">
        <a href="#" class="logo" @click.prevent="goHome">
          <i class="fas fa-heartbeat logo-icon"></i>
          <div class="logo-text">智慧<span>养老</span>平台</div>
        </a>
        <nav class="nav-links">
          <a href="#" class="nav-link" :class="{'active': currentPage === 'home'}" @click.prevent="goHome">
            <i class="fas fa-home"></i>
            首页概览
          </a>
          <a href="#" class="nav-link" :class="{'active': currentPage === 'health'}" @click.prevent="goHealth">
            <i class="fas fa-user-injured"></i>
            健康数据
          </a>
          <a href="#" class="nav-link" @click.prevent="showLocation">
            <i class="fas fa-map-marker-alt"></i>
            一键定位
          </a>
          <a href="#" class="nav-link" @click.prevent="showService">
            <i class="fas fa-concierge-bell"></i>
            预约服务
          </a>
          <a href="#" class="nav-link" @click.prevent="showEmergency">
            <i class="fas fa-first-aid"></i>
            紧急求助
          </a>
        </nav>
      </div>
    </header>

    <!-- 首页内容 -->
    <main class="container" v-if="currentPage === 'home'">
      <div class="home-page fade-in">
        <section class="hero">
          <div class="hero-content">
            <div class="hero-text">
              <h1 class="hero-title">
                智慧养老服务平台
                <span>让每位老人安享晚年</span>
              </h1>
              <p class="hero-description">
                运用物联网、云计算和人工智能技术，为老年人提供全面的健康监测、安全防护、生活服务和情感关怀，打造"安心、舒心、开心"的养老生活
              </p>

              <!-- 数据统计区域 -->
              <div class="stats-container fade-in" style="animation-delay: 0.2s">
                <div class="stat-card">
                  <i class="fas fa-users stat-icon"></i>
                  <div class="stat-number">2800</div>
                  <div class="stat-title">服务人群覆盖</div>
                  <div class="stat-unit">万人</div>
                </div>

                <div class="stat-card">
                  <i class="fas fa-hands-helping stat-icon"></i>
                  <div class="stat-number">100</div>
                  <div class="stat-title">养老指挥中心</div>
                  <div class="stat-unit">个</div>
                </div>

                <div class="stat-card">
                  <i class="fas fa-concierge-bell stat-icon"></i>
                  <div class="stat-number">5</div>
                  <div class="stat-title">每日服务次数</div>
                  <div class="stat-unit">万次</div>
                </div>

                <div class="stat-card">
                  <i class="fas fa-heartbeat stat-icon"></i>
                  <div class="stat-number">30</div>
                  <div class="stat-title">每日救助老人</div>
                  <div class="stat-unit">位</div>
                </div>

                <div class="stat-card">
                  <i class="fas fa-map-marked-alt stat-icon"></i>
                  <div class="stat-number">218</div>
                  <div class="stat-title">服务覆盖区县</div>
                  <div class="stat-unit">个</div>
                </div>
              </div>
            </div>

            <!-- 老年夫妇照片区域 -->
            <div class="elder-photo">
              <div class="elder-photo-placeholder">
                <i class="fas fa-user-friends"></i>
                <h3>智慧养老实践者</h3>
                <p>我们致力于为每一位老人提供贴心服务</p>
              </div>
            </div>
          </div>
        </section>

        <!-- 底部标语 -->
        <footer class="footer fade-in" style="animation-delay: 0.3s">
          <div class="platform-slogan">"老人离不开的生活服务平台"</div>
          <div class="slogan-sub">全天候健康监测 · 一键紧急求助 · 智能定位服务 · 专业医疗照护</div>
        </footer>
      </div>
    </main>

    <!-- 健康数据页面（根据图片信息精准重建） -->
    <section class="health-data-page fade-in" v-else>
      <div class="health-container">
        <div class="health-header">
          <h2 class="health-title">老年健康数据监测中心</h2>
          <button class="back-btn" @click="goHome">
            <i class="fas fa-arrow-left"></i>
            返回首页
          </button>
        </div>

        <div class="health-content">
          <div class="personal-info">
            <div class="info-badge">健康状况良好</div>
            <div class="avatar-container">
              <div class="avatar-placeholder">
                <i class="fas fa-user"></i>
              </div>
              <div class="user-name">张建民</div>
              <div class="user-age">68岁 · 北京市朝阳区</div>

              <div class="info-section">
                <div class="section-title">基本信息</div>
                <div class="info-item">
                  <i class="fas fa-signature"></i>
                  <strong>姓名：</strong> 张建民
                </div>
                <div class="info-item">
                  <i class="fas fa-id-card"></i>
                  <strong>年龄：</strong> 68岁
                </div>
                <div class="info-item">
                  <i class="fas fa-map-marker-alt"></i>
                  <strong>居住地址：</strong> 北京市朝阳区呼家楼北街45号
                </div>
                <div class="info-item">
                  <i class="fas fa-phone-alt"></i>
                  <strong>紧急联系人：</strong> 张小民 (13800138000)
                </div>
              </div>

              <div class="info-section">
                <div class="section-title">健康状况</div>
                <div class="info-item">
                  <i class="fas fa-heartbeat"></i>
                  <strong>病史：</strong> 高血压、糖尿病
                </div>
                <div class="info-item">
                  <i class="fas fa-user-md"></i>
                  <strong>签约医生：</strong> 王立华 主任医师
                </div>
                <div class="info-item">
                  <i class="fas fa-file-medical"></i>
                  <strong>当前用药：</strong> 二甲双胍、洛汀新
                </div>
                <div class="info-item">
                  <i class="fas fa-clock"></i>
                  <strong>随访日期：</strong> 每周三 下午14:00-16:00
                </div>
              </div>

              <div class="info-section">
                <div class="section-title">体征指标</div>
                <div class="info-item">
                  <i class="fas fa-heart"></i>
                  <strong>心率：</strong> 78 次/分 (正常)
                </div>
                <div class="info-item">
                  <i class="fas fa-temperature-high"></i>
                  <strong>血压：</strong> 136/82 mmHg (良好)
                </div>
                <div class="info-item">
                  <i class="fas fa-weight"></i>
                  <strong>体重：</strong> 69.3 kg
                </div>
              </div>
            </div>
          </div>

          <div class="charts-container">
            <!-- 月度健康数据趋势图（根据图片精准重建） -->
            <div class="chart trend-chart fade-in" style="animation-delay: 0.1s">
              <div class="chart-title">
                <span>月度健康数据趋势</span>
                <span class="chart-value">综合评分: 84.3</span>
              </div>
              <div class="chart-content">
                <div class="chart-canvas">
                  <div class="chart-grid">
                    <svg width="100%" height="100%" viewBox="0 0 1000 400">
                      <!-- 连接所有数据点的折线 -->
                      <path :d="trendPath" class="line-path"></path>

                      <!-- 精确位置的数据点 -->
                      <circle v-for="(point, idx) in trendPoints" :key="idx" :cx="point.x" :cy="point.y" r="8"
                        class="data-point"></circle>

                      <!-- 网格线 -->
                      <line x1="0" y1="80" x2="1000" y2="80" class="grid-line"></line>
                      <line x1="0" y1="160" x2="1000" y2="160" class="grid-line"></line>
                      <line x1="0" y1="240" x2="1000" y2="240" class="grid-line"></line>
                      <line x1="0" y1="320" x2="1000" y2="320" class="grid-line"></line>
                    </svg>

                    <!-- 数据点标签 -->
                    <div v-for="(point, idx) in trendPoints" :key="'label-'+idx" class="point-label"
                      :style="point.labelStyle">{{ point.value }}</div>
                  </div>
                  <div class="y-axis">
                    <div class="y-label">630</div>
                    <div class="y-label">500</div>
                    <div class="y-label">300</div>
                    <div class="y-label">100</div>
                    <div class="y-label">0</div>
                  </div>
                  <div class="x-axis">
                    <div class="x-label">1月</div>
                    <div class="x-label">4月</div>
                    <div class="x-label">7月</div>
                    <div class="x-label">10月</div>
                    <div class="x-label">12月</div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 血氧饱和度图表（根据图片精准重建） -->
            <div class="chart oxygen-chart fade-in" style="animation-delay: 0.2s">
              <div class="chart-title">
                <span>每日血氧饱和度变化 (24小时)</span>
                <span class="chart-value">当前: 98%</span>
              </div>
              <div class="chart-content">
                <div class="chart-canvas">
                  <div class="chart-grid">
                    <svg width="100%" height="100%" viewBox="0 0 1000 400">
                      <path :d="oxygenPath" class="line-path"></path>

                      <circle v-for="(point, idx) in oxygenPoints" :key="idx" :cx="point.x" :cy="point.y" r="8"
                        class="data-point"></circle>

                      <line x1="0" y1="80" x2="1000" y2="80" class="grid-line"></line>
                      <line x1="0" y1="160" x2="1000" y2="160" class="grid-line"></line>
                      <line x1="0" y1="240" x2="1000" y2="240" class="grid-line"></line>
                      <line x1="0" y1="320" x2="1000" y2="320" class="grid-line"></line>
                    </svg>
                    <div v-for="(point, idx) in oxygenPoints" :key="'label-'+idx" class="point-label"
                      :style="point.labelStyle">{{ point.value }}%</div>
                  </div>
                  <div class="y-axis">
                    <div class="y-label">100%</div>
                    <div class="y-label">80%</div>
                    <div class="y-label">60%</div>
                    <div class="y-label">40%</div>
                    <div class="y-label">20%</div>
                    <div class="y-label">0%</div>
                  </div>
                  <div class="x-axis">
                    <div class="x-label">00:00</div>
                    <div class="x-label">06:00</div>
                    <div class="x-label">12:00</div>
                    <div class="x-label">18:00</div>
                    <div class="x-label">24:00</div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 血糖图表（根据图片精准重建） -->
            <div class="chart sugar-chart fade-in" style="animation-delay: 0.3s">
              <div class="chart-title">
                <span>老年人一周血糖变化情况</span>
                <span class="chart-value">今日: 6.8 mmol/L</span>
              </div>
              <div class="chart-content">
                <div class="chart-canvas">
                  <div class="chart-grid">
                    <svg width="100%" height="100%" viewBox="0 0 1000 400">
                      <path :d="sugarPath" class="line-path"></path>

                      <circle v-for="(point, idx) in sugarPoints" :key="idx" :cx="point.x" :cy="point.y" r="8"
                        class="data-point"></circle>

                      <line x1="0" y1="100" x2="1000" y2="100" class="grid-line"></line>
                      <line x1="0" y1="200" x2="1000" y2="200" class="grid-line"></line>
                      <line x1="0" y1="300" x2="1000" y2="300" class="grid-line"></line>
                    </svg>
                    <div v-for="(point, idx) in sugarPoints" :key="'label-'+idx" class="point-label"
                      :style="point.labelStyle">{{ point.value }} mmol/L</div>
                  </div>
                  <div class="y-axis">
                    <div class="y-label">30.0</div>
                    <div class="y-label">20.0</div>
                    <div class="y-label">10.0</div>
                    <div class="y-label">0.0</div>
                  </div>
                  <div class="x-axis">
                    <div class="x-label">周一</div>
                    <div class="x-label">周二</div>
                    <div class="x-label">周三</div>
                    <div class="x-label">周四</div>
                    <div class="x-label">周五</div>
                    <div class="x-label">周六</div>
                    <div class="x-label">周日</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>

  <script>
    const { createApp, ref, computed } = Vue;

    createApp({
      setup() {
        // 状态管理
        const currentPage = ref('home');

        // 页面导航
        const goHome = () => {
          currentPage.value = 'home';
        };

        const goHealth = () => {
          currentPage.value = 'health';
        };

        const showLocation = () => {
          alert("一键定位功能已启动！您的位置已发送给护理中心，工作人员将在15分钟内到达！");
        };

        const showService = () => {
          alert("服务预约功能已开启，请选择所需服务类型和时间");
        };

        const showEmergency = () => {
          alert("紧急求助已启动！系统已将您的求救信号发送给家人和护理中心！");
        };

        // ========================================================
        // 根据图片信息精准重建的图表数据
        // ========================================================

        // 1. 月度健康数据趋势图（精确数据点位置）
        const trendPoints = ref([
          { x: 50, y: 340, value: 23 },
          { x: 130, y: 355, value: 11 },
          { x: 210, y: 380, value: 1 },
          { x: 290, y: 380, value: 1 },
          { x: 370, y: 340, value: 23 },
          { x: 450, y: 380, value: 1 },
          { x: 530, y: 370, value: 13 },
          { x: 610, y: 380, value: 1 },
          { x: 690, y: 380, value: 1 },
          { x: 770, y: 60, value: 100 },
          { x: 850, y: 200, value: 80 },
          { x: 930, y: 200, value: 80 }
        ]);

        // 计算SVG路径（连续连接所有数据点）
        const trendPath = computed(() => {
          const points = trendPoints.value;
          if (points.length < 2) return '';

          let path = `M ${points[0].x} ${points[0].y} `;
          for (let i = 1; i < points.length; i++) {
            path += `L ${points[i].x} ${points[i].y} `;
          }
          return path;
        });

        // 为每个点添加标签位置
        trendPoints.value.forEach((point, idx) => {
          point.labelStyle = {
            left: `${point.x / 10}%`,
            top: `${(point.y - 40) / 4}%`
          };
        });

        // 2. 血氧饱和度图表（精确数据点位置）
        const oxygenPoints = ref([
          { x: 50, y: 380, value: 20 },
          { x: 250, y: 240, value: 85 },
          { x: 450, y: 160, value: 95 },
          { x: 650, y: 140, value: 97 },
          { x: 850, y: 120, value: 98 }
        ]);

        const oxygenPath = computed(() => {
          const points = oxygenPoints.value;
          if (points.length < 2) return '';

          let path = `M ${points[0].x} ${points[0].y} `;
          for (let i = 1; i < points.length; i++) {
            path += `L ${points[i].x} ${points[i].y} `;
          }
          return path;
        });

        oxygenPoints.value.forEach((point, idx) => {
          point.labelStyle = {
            left: `${point.x / 10}%`,
            top: `${(point.y - 30) / 4}%`
          };
        });

        // 3. 血糖变化图表（精确数据点位置）
        const sugarPoints = ref([
          { x: 80, y: 300, value: 3.0 },
          { x: 220, y: 250, value: 10.0 },
          { x: 360, y: 190, value: 19.6 },
          { x: 500, y: 140, value: 28.0 },
          { x: 640, y: 200, value: 13.1 },
          { x: 780, y: 220, value: 10.6 },
          { x: 920, y: 250, value: 6.8 }
        ]);

        const sugarPath = computed(() => {
          const points = sugarPoints.value;
          if (points.length < 2) return '';

          let path = `M ${points[0].x} ${points[0].y} `;
          for (let i = 1; i < points.length; i++) {
            path += `L ${points[i].x} ${points[i].y} `;
          }
          return path;
        });

        sugarPoints.value.forEach((point, idx) => {
          point.labelStyle = {
            left: `${point.x / 10}%`,
            top: `${(point.y - 30) / 4}%`
          };
        });

        return {
          currentPage,
          goHome,
          goHealth,
          showLocation,
          showService,
          showEmergency,
          trendPoints,
          trendPath,
          oxygenPoints,
          oxygenPath,
          sugarPoints,
          sugarPath
        };
      }
    }).mount('#app');
  </script>
</body>

</html>